<template>
	<!-- 我的-我的特权 -->
	<view class="myPrivilege">
		<!-- <view class="bg_top" :style="'height:'+(2*menuButtonInfo.top+48)+'rpx'"></view>
		<view class="top z_index" :style="'padding-top:'+ menuButtonInfo.top + 'px'">
			<u-icon @click="goNavigateBack" class="top_icon" name="arrow-left" color="#000000" size="40"></u-icon>
			<view class="top_title">我的特权</view>
		</view>
 -->
		<!-- <view class="box_" :style="'padding-top:'+ (2*menuButtonInfo.top+98) + 'rpx'"> -->

		<view class="box_">
			<recommend :status="status" :coupon="coupon" :Status="'bought'" @updata="updatas"></recommend>
			<!-- <u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" /> -->
		</view>
		
	</view>
</template>

<script>
	import recommend from "@/components/recommend/recommend.vue"
	import empty from "@/components/defaultpage/empty.vue"
	import network from "@/components/defaultpage/network.vue"
import loading from '@/components/loading/loading.vue'
	export default {
		data() {
			return {
			

				coupon: [],
				pageSize: 7,
				pageNum: 1,
				isTrue: true,
				loadText: {
					loadmore: '',
					loading: '努力加载中',
					nomore: '已经到底部了'
				},
				status: 'Loading',
				iconType: 'flower',
				isLoading: true
			}
		},
		onLoad(param) {


			
				
				this.initData();
		
			
		},
		// onShow(){

		// 	debugger
		// },
		onReachBottom() {
			// debugger
			if (this.isTrue) {
				this.pageNum++;
				this.status = "Loading";
				
				
					this.initData();
			}
		},
		components: {
			empty,
			network,
			loading
		},
		methods: {

		
			initData() {
				let req = {};
				req.pageSize = this.pageSize;
				req.pageNum = this.pageNum;
				this.$apis.privilegeOwnerList(this.pageSize,this.pageNum).then(res => {
					this.isLoading = false;
					console.log(res)
					let newList = [];
					if (res.rows.length != 0) {
						res.rows.forEach(item => {
							// debugger
							newList.push({
								src: item.privilegeImage,
								name: item.privilegeTitle,
								mian: item.coin,
								path: '/pages/privilege/privilegedetail/privilegedetail',
								price: item.price,
								privilegeId: item.privilegeId,
								hasBuy: item.hasBuy,
								isShow: false,
								payNo: this.$Tools.Cardformat(item.payNo),
								consumeType: item.consumeType,
								qrCode: item.qrCode,
								userPrivilegeId: item.userPrivilegeId

							})
						})
						this.coupon = [...this.coupon, ...newList];
						this.status = "";
						if(res.rows.length < this.pageSize){
							this.status = 'moduleNomore';
							this.isTrue = false;
							return;
						}
					} else {
						this.status = 'moduleNomore';
						this.isTrue = false;
						if(this.pageNum == 1){
							this.status = 'empty';
						}
					}


				})
			},
			goNavigateBack() {
				uni.navigateBack()
			},
			updatas(data) {
				// debugger
				this.coupon = JSON.parse(JSON.stringify(data));
			}
		}
	}
</script>

<style>
	.circle {
		    width: 100%;
		    height: 100vh;
		    justify-content: center;
		    align-items: center;
		    padding-top: 65%;
	}
	.myPrivilege{
		padding-top: 20rpx;
	}
	.bg_top {
		width: 750rpx;
		background-color: #ffffff;
		position: fixed;
		z-index: 9;
	}

	.z_index {
		z-index: 10;
	}

	.top {
		width: 750rpx;
		height: 48rpx;
		background-color: #FFFFFF;
		position: fixed;
		padding-bottom: 20rpx;
	}

	.top_icon {
		margin-left: 32rpx;
		display: inline-block;
	}

	.top_title {
		position: absolute;
		font-size: 34rpx;
		font-weight: 500;
		line-height: 48rpx;
		display: inline-block;
		left: 50%;
		transform: translate(-50%);
	}

	.box_ {
		/* margin: 0 22rpx 0 40rpx; */
	}

	.box {
		width: 688rpx;
		margin-top: 40rpx;
	}

	.box_content {
		width: 326rpx;
		height: 432rpx;
		background: #f5f6f9;
		border-radius: 4px;
		margin-right: 18rpx;
		margin-bottom: 18rpx;
		text-align: center;
	}

	.box_content_image image {
		max-width: 246rpx;
		max-height: 282rpx;
	}
</style>
